<extend name="../public/base"/>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <title>demo</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/static/css/layui.css">
    <style>
        .main {
            width: 600px;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .choose_room {
            margin-top: 50px;
        }
        .login {
            width: 500px;
            height: 300px;
        }
        .login_form {
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="create_room">
            <a href="javascript:void(0)" class="layui-btn do_create_room">创建房间</a>
            <a href="javascript:void(0)" class="layui-btn join_room" data-room-id="0" style="display: none;">我的房间</a>
        </div>
        <div class="choose_room">
            <div class="room_list">

            </div>
        </div>
    </div>

    <div class="login" style="display: none">
        <div class="login_form">
            <br/>
            <br/>
            <input type="text" name="nickname" placeholder="请输入昵称" class="layui-input">
            <br/>
            <input type="password" name="password" placeholder="请输入密码" class="layui-input">
            <br/>
            <button type="button" class="layui-btn do_login">登录</button>
        </div>
    </div>

    <!-- 引入 layui.js -->
    <script src="/static/js/layui.js"></script>
    <!-- 引入 jquery.js -->
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/web_socket.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script src="/static/chat_js/base.js"></script>
    <script src="/static/chat_js/index.js"></script>
    <script>

        $(function () {
            // 登录
            token = $.cookie('token');
            if (isEmpty(token)) {
                showLogin(); // 调用登录弹框
            } else {
                connect();
            }
            // 创建房间
            $('.do_create_room').click(function() {
                var createRoom = layer.prompt({
                    formType: 0,
                    title: "请输入房间名称",
                    value: '',
                }, function (name) {
                    if (isEmpty(name)) {
                        layer.msg('房间名称不能为空');
                        return false;
                    }
                    $.ajax({
                        url: '/index/createRoom',
                        type: 'post',
                        dataType: 'json',
                        data: {name:name},
                        beforeSend: function (XMLHttpRequest) {
                            XMLHttpRequest.setRequestHeader("token", token);
                        },
                        success: function (data) {
                            if (data.code == 1005) {
                                showLogin();
                            } else if (data.code == 0) {
                                layer.msg(data.msg);
                                return false;
                            } else {
                                layer.msg('创建成功');
                                layer.close(createRoom);
                                $('.create_room .join_room').attr('data-room-id',data.room_id);
                                $('.create_room .join_room').show();
                                $('.do_create_room').hide();
                                // 跳转至 加入房间页面

                            }
                        },
                    });
                });
            });

            // 登录
            $('.do_login').click(function() {
                var nickname = $("input[name='nickname']").val();
                var password = $("input[name='password']").val();
                if (isEmpty(nickname)) {
                    layer.msg('请输入昵称');
                    return false;
                }
                if (isEmpty(password)) {
                    layer.msg('请输入密码');
                    return false;
                }
                $.ajax({
                    url: '/index/doLogin',
                    type: 'post',
                    dataType: 'json',
                    data: {nickname:nickname,password:password},
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg);
                            return false;
                        }
                        // 将token存入 cookie
                        $.cookie('token',data.data.token);
                        token = data.data.token;
                        layer.msg('登录成功');
                        connect();
                        layer.close(showLoginPage);
                        $('.login').hide();
                    },
                });
            });

            // 加入房间
            $('.join_room').click(function () {
                var room_id = $(this).attr('data-room-id');
                location.href = '/index/joinRoom?room_id=' + room_id;
            });
        })

    </script>

</body>
</html>
